import { defineConfig } from "vite";
import path from 'path';
// ts语法检查，有语法错误会打印在终端里
import checker from "vite-plugin-checker";
// gzip压缩插件
import viteCompression from 'vite-plugin-compression';
// 导入cdn加速插件
import cdn from 'vite-plugin-cdn-import';

// 可以对css进行降级兼容低版本浏览器处理
// const postcssPresetEnv = require("postcss-preset-env");

/*
  * dotenv库用于处理环境变量
    1. .env 所有环境都需要用到的环境变量
    2. .env.development 开发环境所需要用到的环境变量
    3. .env.productioin 生产环境所需要用到的环境变量
    4. loadEnv方法加上三个参数会返回当前vite的环境变量
        (1) mode: 当前是开发还是生产模式
        (2) process.cwd(): 当前执行路径
        (3) "": 其实是prefix, 前缀
    5. 如果是客户端(其实就是我们的开发环境下), vite会将环境变量注入到import.meta.env中去
    6. 如果你的环境变量不是以 VITE开头的，那么将不会被注入到import.meta.env(客户端)当中去
    *   const env = loadEnv(mode, process.cwd(), "");
        console.log("env", env);
*/

export default defineConfig({
  resolve: {
    // 别名
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
    }
  },
  // 开发服务配置
  server: {
    open: true,
    host: "localhost",
    hmr: true,
    port: 5175,
    /*
      生产环境: 一般都是后端/运维将文件放到同源服务器下, 所以生产环境一般不会有跨域问题，因为开始时请求的接口就是我们需要部署的服务器地址
        1. nginx配置代理服务
        2. 配置身份标记
            - Access-Control-Allow-Origin: 代表哪些域可以请求 ，标记了之后，浏览器就不会再拦截了
    */
    proxy: {
      "/api": {
        // 如果我们不配置代理, 请求是这么写的: fetch('/api').then(() => { ... }), 那么浏览器会拼接为: http://localhost:5175/api
        // 以后在遇到/api开头的请求时, 都将代理到 target 属性对应的地址中去
        target: "https://www.360.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  // 配置vite环境变量的前缀, 环境变量默认的前缀为 VITE
  envPrefix: "ENV",
  // 配置css
  css: {
    modules: {

    },
    // css预处理器配置
    preprocessorOptions: {
      // 整个的配置对象都会给到less的执行参数( 全局参数 )中去
      // less对象更多的配置可以查看: lesscss.org 官网 ( sass也同理 )
      less: {
        math: "always",
        // 全局变量
        globalVars: {
          mainColor: "red"
        }
      },
      sass: {

      }
    },
    // 可以在开发环境下查看css文件名，开启css文件的sourcemap(文件索引)
    devSourcemap: true,
    // 类似于js中的babel, 区别是postcss是对css进行编译处理
    // vite会自动读取同级路径下的postcss.config.js
    // 如果这里配置了postcss字面量，那么优先级会高于postcss.config.js的配置
    // postcss: {
    //   plugins: [ postcssPresetEnv() ]
    // }
  },
  // 打包配置
  build: {
    rollupOptions: {
      // 控制输出
      output: {
        assetFileNames: "[name].[hash].[ext]",
        // 应用于分包优化策略
        manualChunks: (id) => {
          console.log("id", id);
          // ts抛出调用includes错误是因为: ts认为你当前这个环境不在ES6以后, 所以不能使用这个方法
          // 当配置了lib为es2017就不报错了
          if(id.includes("node_modules")) {
            return "vendor";
          }
        }
      }
    },
    assetsInlineLimit: 4096000, // 低于400kb的静态资源将会被打包成base64 （ 打包成base64造成体积增大，请求次数减少 ）
    // 打包输出的文件夹名字
    outDir: "dist",
    // 打包后静态资源文件夹名字
    assetsDir: "static"
  },
  // 让ts的错误直接输出到控制台
  plugin: [
    checker({
      typescript: true
    }),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240, // 压缩阈值，小于这个值的文件将不会被压缩（单位为字节）
      algorithm: 'gzip', // 压缩算法
      ext: '.gz', // 压缩文件后缀名
    }),
    cdn({
      modules: [
        {
          // 包名
          name: 'react',
          // 包导出的变量名
          var: 'React',
          // cdn地址, 记得要写上http那种的绝对地址
          path: `umd/react.production.min.js`,
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: `umd/react-dom.production.min.js`,
        },
      ],
    }),
  ]
});